<template>
  <a-modal
    :open="createModel"
    :title="`${actionItem ? '编辑' : '新增'}会员`"
    :width="700"
    :maskClosable="false"
    :confirmLoading="createLoading"
    @ok="submitCreate"
    @cancel="cancelCreate"
  >
    <a-divider />
    <a-form
      name="basic"
      ref="createFormRef"
      :model="createForm"
      :rules="createFormRules"
      :label-col="{ style: { width: '120px' } }"
      autocomplete="off"
    >
      <a-form-item label="姓名" name="vipName">
        <a-input v-model:value="createForm.vipName" class="input-01" show-count :maxlength="100" />
      </a-form-item>
      <a-form-item label="性别" name="vipSex">
        <a-radio-group v-model:value="createForm.vipSex" name="radioGroup">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="手机号" name="vipMobile">
        <a-input
          v-model:value="createForm.vipMobile"
          class="input-01"
          show-count
          :maxlength="100"
        />
      </a-form-item>
      <a-form-item label="充值费用" name="realMoney">
        <a-input-number
          v-model:value="createForm.realMoney"
          addon-after="￥"
          :min="1"
          :precision="2"
          @change="handleMoneyChange"
        />
      </a-form-item>
      <a-form-item label="赠送费用" name="sendMoney">
        <a-input-number
          v-model:value="createForm.sendMoney"
          addon-after="￥"
          :min="1"
          :precision="2"
          @change="handleMoneyChange"
        />
      </a-form-item>
      <a-form-item label="充值日期" name="rechargeDate">
        <a-date-picker v-model:value="createForm.rechargeDate" class="input-01" />
      </a-form-item>
      <a-form-item label="会员描述" name="vipDesc">
        <a-textarea
          v-model:value="createForm.vipDesc"
          :rows="2"
          class="input-01"
          show-count
          :maxlength="600"
        />
      </a-form-item>
    </a-form>
    <a-divider />
  </a-modal>
</template>
<script setup lang="ts" name="MemberCreate">
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { computed, reactive, ref, watch, type UnwrapRef } from 'vue'
import dayjs from 'dayjs'
import type { CreateOrUpdateForm, TableItem } from '#/member-management'
import { addOrUpdateMemberItem } from '@/api/member-management'

const emit = defineEmits(['update:createModel', 'createSuccess'])
const props = defineProps({
  createModel: {
    type: Boolean,
    default: false
  },
  actionItem: {
    type: Object,
    default: () => {}
  }
})
const createModel = computed(() => props.createModel)
const actionItem = computed(() => props.actionItem as undefined | TableItem)
const createLoading = ref(false)
const createFormRef = ref()
const createForm: UnwrapRef<CreateOrUpdateForm> = reactive({
  vipDesc: '',
  rechargeDate: dayjs(),
  vipName: '',
  vipMobile: '',
  vipSex: 1,
  realMoney: undefined,
  sendMoney: undefined
})
const createFormRules: Record<string, Rule[]> = {
  vipName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
  vipSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  vipMobile: [{ required: true, message: '请输入手机号', trigger: 'change' }],
  realMoney: [{ required: true, message: '请输入充值费用', trigger: 'change' }],
  sendMoney: [{ required: true, message: '请输入赠送费用', trigger: 'change' }],
  rechargeDate: [{ required: true, message: '请选择充值日期', trigger: 'blur' }],
  vipDesc: [{ required: true, message: '请输入会员描述', trigger: 'change' }]
}

const submitCreate = () => {
  createFormRef.value.validate().then(() => {
    createLoading.value = true
    addOrUpdateMemberItem(createForm)
      .then(() => {
        message.success(`${actionItem.value ? '编辑' : '新增'}会员成功`)
        emit('createSuccess')
        cancelCreate()
      })
      .catch(() => {
        createLoading.value = false
      })
  })
}

const cancelCreate = () => {
  createFormRef.value.resetFields()
  emit('update:createModel', false)
  createLoading.value = false
}

const handleMoneyChange = () => {
  createForm.vipDesc = `冲${createForm.realMoney || 0}送${createForm.sendMoney || 0}`
}

watch(
  () => props.createModel,
  () => {
    if (actionItem.value) {
      createForm.id = actionItem.value.id
      createForm.vipDesc = actionItem.value.vipDesc
      createForm.rechargeDate = dayjs(actionItem.value.rechargeDate)
      createForm.vipName = actionItem.value.vipName
      createForm.vipMobile = actionItem.value.vipMobile
      createForm.vipSex = actionItem.value.vipSex
      createForm.realMoney = actionItem.value.realMoney
      createForm.sendMoney = actionItem.value.sendMoney
    } else {
      delete createForm.id
      createForm.vipDesc = ''
      createForm.rechargeDate = dayjs()
      createForm.vipName = ''
      createForm.vipMobile = ''
      createForm.vipSex = 1
      createForm.realMoney = undefined
      createForm.sendMoney = undefined
    }
  }
)
</script>
<style lang="less" scoped>
.input-01 {
  width: 400px;
}
</style>
